<!-- 售后订单详情 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="订单详情" :borderBottom="false"></u-navbar>
		<!-- 卖家显示 -->
		<block v-if="type==0">
			<view class="top" v-if="detail.after_status==1">
				<view class="title">审核中</view>
				<view>申请时间：{{detail.createtime}}</view>
			</view>
			<view class="top" v-if="detail.after_type==1&&detail.after_status==2">
				<view class="title">退款成功</view>
				<view>同意申请，退款金额原路返还</view>
			</view>
			<view class="top" v-if="(detail.after_type==3||detail.after_type==4)&&detail.after_status==2">
				<view class="title">待退货</view>
				<view>等待买家退货</view>
			</view>
			<view class="top" v-if="detail.after_type==2&&detail.after_status==2">
				<view class="title">补货中</view>
				<view>等待卖家补货</view>
			</view>
			<view class="top" v-if="detail.after_status==3">
				<view class="title">退款失败</view>
				<view>卖家拒绝了申请</view>
			</view>
			<view class="top" v-if="detail.after_status==4">
				<view class="title">申请已取消</view>
				<view>申请时间：{{detail.createtime}}</view>
			</view>
			<view class="top" v-if="detail.after_type==2&&detail.after_status==5">
				<view class="title">待收货</view>
				<view>卖家已发货，待买家收货</view>
			</view>
			<view class="top" v-if="detail.after_type==4&&detail.after_status==5">
				<view class="title">待收货</view>
				<view>买家已退货,待卖家收货</view>
			</view>
			<view class="top" v-if="detail.after_type==3&&detail.after_status==5">
				<view class="title">待收货</view>
				<view>买家已退货,待卖家收货</view>
			</view>
			<view class="top" v-if="(detail.after_type==2||detail.after_type==4)&&detail.after_status==6">
				<view class="title">补货中</view>
				<view>买家已退货,等待卖家补货</view>
			</view>
			<view class="top" v-if="(detail.after_type==2||detail.after_type==4)&&detail.after_status==7">
				<view class="title">补货回寄中</view>
				<view>卖家已回寄</view>
			</view>
			<view class="top" v-if="(detail.after_type==2||detail.after_type==4)&&detail.after_status==8">
				<view class="title">买家已收货</view>
				<view>售后已完成</view>
			</view>
			<view class="top" v-if="detail.after_type==3&&detail.after_status==6">
				<view class="title">退款成功</view>
				<view>卖家已收货，退款金额原路返还</view>
			</view>
			
		</block>
		<block v-if="type==1">
			<view class="top" v-if="detail.after_status==1">
				<view class="title">审核中</view>
				<view>申请时间：{{detail.createtime}}</view>
			</view>
			<view class="top" v-if="detail.after_type==1&&detail.after_status==2">
				<view class="title">退款成功</view>
				<view>申请成功，退款金额原路返还</view>
			</view>
			<view class="top" v-if="(detail.after_type==3||detail.after_type==4)&&detail.after_status==2">
				<view class="title">待退货</view>
				<view>等待买家退货</view>
			</view>
			<view class="top" v-if="detail.after_type==2&&detail.after_status==2">
				<view class="title">补货中</view>
				<view>等待卖家补货</view>
			</view>
			<view class="top" v-if="detail.after_status==3">
				<view class="title">退款失败</view>
				<view>卖家拒绝了申请</view>
			</view>
			<view class="top" v-if="detail.after_status==4">
				<view class="title">申请已取消</view>
				<view>申请时间：{{detail.createtime}}</view>
			</view>
			<view class="top" v-if="detail.after_type==2&&detail.after_status==5">
				<view class="title">回寄中</view>
				<view>卖家已发货，带买家收货</view>
			</view>
			<view class="top" v-if="detail.after_type==4&&detail.after_status==5">
				<view class="title">回寄中</view>
				<view>买家已退货,待卖家收货</view>
			</view>
			<view class="top" v-if="detail.after_type==3&&detail.after_status==5">
				<view class="title">回寄中</view>
				<view>买家已退货,待卖家收货</view>
			</view>
			<view class="top" v-if="(detail.after_type==2||detail.after_type==4)&&detail.after_status==6">
				<view class="title">补货中</view>
				<view>买家已退货,卖家补货中</view>
			</view>
			<view class="top" v-if="(detail.after_type==2||detail.after_type==4)&&detail.after_status==7">
				<view class="title">补货回寄中</view>
				<view>卖家已回寄</view>
			</view>
			<view class="top" v-if="(detail.after_type==2||detail.after_type==4)&&detail.after_status==8">
				<view class="title">买家已收货</view>
				<view>售后已完成</view>
			</view>
			<view class="top" v-if="(detail.after_type==1)&&detail.after_status==6">
				<view class="title">退款成功</view>
				<view>退款完成</view>
			</view>
			<view class="top" v-if="(detail.after_type==3)&&detail.after_status==6">
				<view class="title">退款成功</view>
				<view>卖家已收货，退款金额原路返还</view>
			</view>
		</block>
		<view class="wrap">
			<navigator hover-class="none" :url="'/home/station/stationpage?id='+detail.user_info.id" class="seller flex_bet_align" v-if="type==1">
				<view class="flex_align">
					<view class="name">卖家：{{detail.user_info.name}}</view>
					<image class="img" v-if="detail.user_info.mimage" :src="detail.user_info.mimage" mode="aspectFit"></image>
					<view class="xin"><text>信</text>{{detail.user_info.credit_value}}</view>
					<view class="shi" v-if="detail.user_info.realname">实</view>
					<view class="qi" v-if="detail.user_info.enterprise">企</view>
				</view>
				<view class="iconfont icon-xwtubiaoku-03"></view>
			</navigator>
			<view class="flex_align goods" v-if="detail.goods_info">
				<image class="goodsImg" :src="detail.goods_info.image"></image>
				<view class="content">
					<view class="goodsName clamp2">{{detail.goods_info.title}}</view>
					<view class="goodsName clamp2">{{detail.goods_info.spec_value}}</view>
					<view class="price">￥{{detail.goods_info.money}}/{{detail.goods_info.unit}}</view>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="order">
			<view class="flex_bet_align item">
				<view class="name">订单编号</view>
				<view style="flex:1;" class="clamp1">{{detail.after_order_sn}}</view>
				<view class="copy" @click="$plug.copyText(detail.after_order_sn)">复制</view>
			</view>
			<view class="item flex_align">
				<view class="name">购买数量</view>
				<view>{{detail.order_goods_num}}{{detail.goods_info.unit}}</view>
			</view>
			<view class="item flex_align">
				<view class="name">协商单价</view>
				<view>￥{{detail.order_unit_price}}</view>
			</view>
			<view class="item flex_align">
				<view class="name">其他杂费</view>
				<view>￥{{detail.order_other_price}}</view>
			</view>
			<view class="item flex_align">
				<view class="name">总价</view>
				<view class="price">￥{{detail.after_money}}</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="afterSale">
			<view class="title">售后信息</view>
			<view class="item flex_bet_align">
				<view class="name">售后类型</view>
				<view v-if="detail.after_type==1">仅退款</view>
				<view v-if="detail.after_type==2">缺货补货</view>
				<view v-if="detail.after_type==3">退货退款</view>
				<view v-if="detail.after_type==4">换货</view>
			</view>
			<view class="item flex_bet_align">
				<view class="name">售后原因</view>
				<view>{{detail.after_reason}}</view>
			</view>
			<view class="item flex_bet_align" v-if="detail.after_type==2||detail.after_type==4">
				<view class="name">补换数量</view>
				<view class="price">{{detail.supply_num}}</view>
			</view>
			<view class="item flex_bet_align" v-if="detail.after_type==3">
				<view class="name">退款金额</view>
				<view class="price">￥{{detail.after_money}}</view>
			</view>
			<view class="item flex_bet_align">
				<view class="name">备注说明</view>
				<view>{{detail.after_note}}</view>
			</view>
			<view class="gallery">售后凭证</view>
			<view class="imglist">
				<image class="img" v-for="(item,index) in detail.after_images" :key="index" :src="item" @click="$plug.showImg(detail.after_images,item)"></image>
			</view>
		</view>
		<view class="block"></view>
		<view style="height:138rpx;"></view>
		<!-- 卖家显示 -->
		<view class="foot flex_align" v-if="type==0">
			<view class="btnFill" v-if="(detail.after_type==2&&detail.after_status==2)||(detail.after_type==4&&detail.after_status==6)" @click="logistics=true">填写发货</view>
			<view class="btnFill" v-if="detail.after_type==4&&detail.after_status==5" @click="setAfterSale(6)">确认收货</view>
			<view class="btnFill" v-if="detail.after_type==3&&detail.after_status==5" @click="setAfterSale(9)">确认收货</view>
			<view class="btnFill" v-if="detail.after_status==1" @click="setAfterSale(2)">同意</view>
			<view class="btn" v-if="detail.after_status==1" @click="setAfterSale(3)">拒绝</view>
			<view class="btn" v-if="detail.after_status==4||detail.after_status==11">删除订单</view>
			<view class="btn" v-if="(detail.after_type==2||detail.after_type==4)&&(detail.after_status==5||detail.after_status==6)" @click="expressDetail(2)">换货物流</view>
			<view class="btn" v-if="(detail.after_type==3&&detail.after_status==6)||(detail.after_type==3&&detail.after_status==5)" @click="expressDetail(1)">退货物流</view>
			<view class="btn" @click="chat">聊一聊</view>
			<!-- <view class="btn">投诉买家</view> -->
		</view>
		<!-- 买家显示 -->
		<view class="foot flex_align" v-if="type==1">
			<view class="btnFill" v-if="(detail.after_status==7&&detail.after_type==4)||(detail.after_status==5&&detail.after_type==2)" @click="setAfterSale(9)">确认收货</view>
			<view class="btnFill" v-if="detail.after_status==2&&(detail.after_type==3||detail.after_type==4)" @click="logistics=true">立即退货</view>
			<view class="btnFill" v-if="(detail.after_status==1||detail.after_status==2)&&detail.after_type!=1" @click="setAfterSale(4)">取消申请</view>
			<view class="btn" v-if="detail.after_status==4||detail.after_status==11">删除订单</view>
			<view class="btn" v-if="(detail.after_type==2||detail.after_type==4)&&(detail.after_status==5||detail.after_status==6)" @click="expressDetail(2)">换货物流</view>
			<view class="btn" v-if="(detail.after_type==3&&detail.after_status==6)||(detail.after_type==3&&detail.after_status==5)" @click="expressDetail(1)">退货物流</view>
			<!-- <view class="btn">投诉卖家</view> -->
			<view class="btn" @click="chat">聊一聊</view>
		</view>
		
		<u-popup mode="center" border-radius="16" v-model="logistics">
			<view class="modal">
				<view class="title">物流信息</view>
				<view class="flex_align item">
					<view class="name">物流公司*</view>
					<input type="text" v-model="logistics_name" placeholder="请输入物流公司">
				</view>
				<view class="flex_align item">
					<view class="name">物流单号*</view>
					<input type="text" v-model="logistics_order_sn" placeholder="请输入物流单号">
				</view>
				<view class="flex_align item">
					<view class="name">运送车牌号</view>
					<input type="text" maxlength="10" v-model="carnum" placeholder="请输入运送车牌号">
				</view>
				<view class="confirm" @click="confirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	var _this, shak;
	export default {
		data() {
			return {
				id: 0, //订单id
				type: 0, //0卖家观看  1买家观看
				detail: {
					user_info:{},
					goods_info:{},
				},
				//输入物流
				logistics:false,
				// 物流单号
				logistics_order_sn:"",
				// 物流公司
				logistics_name:"",
				// 运送车牌号
				carnum:"",
				
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			_this.type = options.type
			_this.getdata()
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			_this.getdata()
		},
		methods: {
			// 刷新
			isonshow() {
				_this.timestamp = 0
				_this.getdata()
				_this.$plug.isonshow(2)
			}, // 获取数据
			getdata() {
				_this.$api.get("getafterdetail", {
					tab_type: (_this.type == 0 ? 2 : 1),
					after_id: _this.id
				}).then(data => {
					_this.detail = data
				});
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			
			// 售后订单操作
			setAfterSale(type){
				if(type==2||type==3||type==4||type==6||type==9){
					let title="确认本次操作"
					if(type==4){
						title="确认取消申请？"
					}else if(type==2){
						title="同意申请？"
					}else if(type==3){
						title="确认拒绝申请？"
					}else if(type==6){
						title="确认收货？"
					}else if(type==9){
						title="确认收货？"
					}
					uni.showModal({
						content: title,
						success: function (res) {
							if (res.confirm) {
								_this.$api.post("afteroperation", {
									after_id:_this.id,
									after_status:type
								}).then(data => {
									_this.getdata()
									_this.$plug.isonshow(2)
								});
							}
						}
					});
				}
			},
			// 发货提交物流信息
			confirm(){
				_this.click_shake(function(){
					let data = [{
							value: _this.logistics_name,
							type: 2,
							title: "请填写物流公司名称"
						}, {
							value: _this.logistics_order_sn,
							type: 1,
							title: "请填写物流单号"
						}
					]
					if(_this.detail.after_status==2){
						if (_this.$plug.verify(data)) {
							_this.$api.post("afteroperation", {
								after_id: _this.id,
								carnum:_this.carnum,
								after_status: 5,
								logistics_name: _this.logistics_name,
								logistics_order_sn: _this.logistics_order_sn,
							}).then(data => {
								_this.getdata()
								_this.$plug.isonshow(2)
								_this.logistics=false
							});
						}
					}
					if(_this.detail.after_status==6){
						if (_this.$plug.verify(data)) {
							_this.$api.post("afteroperation", {
								after_id: _this.id,
								seller_carnum:_this.carnum,
								after_status: 7,
								seller_logistics_name: _this.logistics_name,
								seller_logistics_order_sn: _this.logistics_order_sn,
							}).then(data => {
								_this.getdata()
								_this.$plug.isonshow(2)
								_this.logistics=false
							});
						}
					}
				})
			},
			// 查看物流
			expressDetail(type){
				uni.navigateTo({
					url:"purchaseLogistics?id="+_this.id+"&type="+type
				})
			},
			// 跳转到聊天
			chat() {
				let obj = this.detail
				let images = []

				images.push(obj.goods_info.image)
				obj.goods_info.images = images
				obj.goods_info.name = obj.user_info.name

				obj.goods_info.client_uid = obj.user_info.id
				console.log(obj)
				wx.setStorageSync('list', obj.goods_info)
				uni.navigateTo({
					url: '../chat/chatingroom?type=5'+ '&member_type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.expressDetail{
		width: 690rpx;
		border: 1rpx solid #38BE8C;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 10rpx auto;
		font-size: 30rpx;
		color: #38BE8C;
	}
	.top {
		width: 750rpx;
		height: 140rpx;
		background: #38be8c;
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;
		color: rgba(255, 255, 255, 0.7);
		padding-top: 22rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			margin-bottom: 6rpx;
		}
	}

	.wrap {
		padding: 24rpx 30rpx;

		.goodsImg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx;
			background-color: #EEEEEE;
			margin-right: 20rpx;
		}

		.content {
			width: 480rpx;
		}

		.goodsName {
			font-size: 28rpx;
			color: #333333;
			line-height: 36rpx;
			height: 72rpx;
		}

		.price {
			font-size: 24rpx;
			font-weight: 500;
			color: #f73f3f;
		}

		.seller {
			padding: 24rpx 0rpx 28rpx;
			font-size: 20rpx;

			.name {
				font-size: 28rpx;
				color: #333333;
				margin-right: 16rpx;
			}

			.img {
				width: 120rpx;
				height: 40rpx;
			}

			.xin {
				font-size: 20rpx;
				height: 28rpx;
				line-height: 26rpx;
				padding-right: 3rpx;
				box-sizing: border-box;
				border: 1rpx solid #00C676;
				color: #00C676;
				margin: 0 13rpx;

				text {
					width: 30rpx;
					display: inline-block;
					background: #00C676;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.shi {
				width: 28rpx;
				height: 28rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 26rpx;
				background-color: #FFA909;
				margin: 0 8rpx;
				text-align: center;
			}

			.qi {
				width: 28rpx;
				height: 28rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 26rpx;
				background-color: #08BAFF;
				text-align: center;
			}

			.iconfont {
				color: #999999;
			}
		}
	}

	.block {
		height: 14rpx;
		background-color: #F8F8F8;
	}

	.order {
		padding: 10rpx 30rpx;

		.item {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #999999;

			.name {
				width: 202rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.copy {
				width: 80rpx;
				height: 42rpx;
				background: #e6e6e6;
				border-radius: 22rpx;
				font-weight: 500;
				text-align: center;
				line-height: 42rpx;
			}

			.price {
				font-size: 28rpx;
				font-weight: 700;
				color: #38be8c;
			}
		}
	}

	.afterSale {
		font-size: 28rpx;
		color: #333333;
		padding: 42rpx 30rpx 56rpx 30rpx;

		.title {
			font-size: 28rpx;
			color: #9a9a9a;
			margin-bottom: 42rpx;
		}

		.item {
			margin-bottom: 60rpx;

			.price {
				color: #FB0303;
			}
		}

		.gallery {
			margin-bottom: 40rpx;
		}
		.imglist{
			width: 100%;
			display: inline-block;
		}
		.img {
			width: 204rpx;
			height: 204rpx;
			border-radius: 10rpx;
			background-color: #EEEEEE;
			margin-right: 20rpx;
			float: left;
		}
	}

	.foot {
		width: 690rpx;
		height: 108rpx;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #ffffff;
		justify-content: flex-start;
		box-sizing: initial;
		padding-bottom: env(safe-area-inset-bottom);
		flex-direction: row-reverse;

		.btn {
			width: 152rpx;
			height: 70rpx;
			background: #ffffff;
			border: 1rpx solid #333333;
			border-radius: 37rpx;
			font-size: 26rpx;
			line-height: 70rpx;
			text-align: center;
			color: #333333;
			margin-left: 35rpx;

			&:last-child {
				margin-left: 0rpx;
			}
		}

		.btnFill {
			width: 152rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #38be8c, #06adba 96%);
			border-radius: 36rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
			margin-left: 26rpx;
		}
	}
	.modal{
		width: 600rpx;
		text-align: center;
		padding: 40rpx 40rpx 10rpx;
		.title{
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #030517;
			line-height: 48rpx;
			margin-bottom: 36rpx;
		}
		.name{
			font-size: 28rpx;
			color: #333333;
			line-height: 90rpx;   
			width: 150rpx;
			text-align: left;
		}
		.item{
			margin-bottom: 26rpx;
		}
		input{
			height: 90rpx;
			border: 1rpx solid #999999;
			font-size: 28rpx;
			padding:25rpx 22rpx;
			margin-left: 20rpx;
			flex: 1;
			text-align:left;
		}
		.confirm{
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #38be8c;
			padding:29rpx 0 26rpx;
			border-top:1rpx solid #FAFAFA;    
			margin-top: 40rpx;
		}
	}
</style>
